<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="xbsj-labels" content="Earth案例">
    </meta>
    <title>数字工厂</title>
    <!-- 0 引入js文件 -->
    <script src="https://cdn.bootcss.com/three.js/r83/three.js"></script>
    <script src="../../XbsjEarth/XbsjEarth.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>

<body>
    <div id="earthContainer" style="width: 100%; height: 100%; background: grey">
    </div>
    <script>
        // 外部简模：http://lab.earthsdk.com/model/27af3f70003311eaae02359b3e5d0653/tileset.json
        // 内部精模：http://lab.earthsdk.com/model/212bc470003311eaae02359b3e5d0653/tileset.json
        // 内部简模：http://lab.earthsdk.com/model/1b91bf10003311eaae02359b3e5d0653/tileset.json

        var earth;
        var bgImagery;

        var fsBody = `
            float vtxf_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
            float vtxf_a12 = v_elevationPos.z / 20.0 + sin(vtxf_a11) * 0.1;
            gl_FragColor *= vec4(vtxf_a12, vtxf_a12, vtxf_a12, 1.0);

            float vtxf_a13 = fract(czm_frameNumber / 360.0);
            float vtxf_h = clamp(v_elevationPos.z / 300.0, 0.0, 1.0);
            vtxf_a13 = abs(vtxf_a13 - 0.5) * 2.0;
            float vtxf_diff = step(0.005, abs(vtxf_h - vtxf_a13));
            gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - vtxf_diff);
            `;

        function startup() {
            earth = new XE.Earth('earthContainer');

            earth.weather.atmosphere.enabled = false;

            const bloom = earth.postProcess.bloom;
            bloom.enabled = true;
            bloom.glowOnly = false;
            bloom.contrast = 119;
            bloom.brightness = -0.4;
            bloom.delta = 0.9;
            bloom.sigma = 3.78;
            bloom.stepSize = 5;
            bloom.isSelected = false;

            earth.sceneTree.root = {
                "children": [
                    {
                        "czmObject": {
                            "xbsjType": "Imagery",
                            "xbsjGuid": "0a74da9f-bff6-4eab-af64-d8cf95978145",
                            "name": "谷歌影像",
                            "brightness": 0.2,
                            "rectangle": null,
                            "xbsjImageryProvider": {
                                "XbsjImageryProvider": {
                                    "url": "//www.google.cn/maps/vt?lyrs=s,h&gl=CN&x={x}&y={y}&z={z}",
                                    "srcCoordType": "GCJ02",
                                    "dstCoordType": "WGS84",
                                    "maximumLevel": 21,
                                },
                                "UrlTemplateImageryProvider": {
                                    "rectangle": null
                                },
                                "WebMapTileServiceImageryProvider": {
                                    "rectangle": null
                                }
                            }
                        }
                    },
                    {
                        "ref": "tileset1",
                        "czmObject": {
                            "xbsjType": "Tileset",
                            "name": "数字工厂-外部简模",
                            "maximumScreenSpaceError": 8,
                            "skipLevelOfDetail": false,
                            "url": "//lab.earthsdk.com/model/27af3f70003311eaae02359b3e5d0653/tileset.json",
                            "xbsjStyle": "var style = {\n    color: \"vec4(0, 0.5, 1.0,1)\"\n}",
                            "xbsjCustomShader": {
                                "fsBody": fsBody,
                            }
                        }
                    },
                    {
                        "ref": "tileset2",
                        "czmObject": {
                            "xbsjType": "Tileset",
                            "name": "数字工厂-内部精模",
                            "maximumScreenSpaceError": 8,
                            "skipLevelOfDetail": false,
                            "url": "//lab.earthsdk.com/model/212bc470003311eaae02359b3e5d0653/tileset.json",
                            "xbsjStyle": "var style = {\n    color: \"vec4(0, 0.5, 1.0,1)\"\n}",
                            "xbsjCustomShader": {
                                "fsBody": fsBody,
                            }
                        }
                    },
                    {
                        "ref": "tileset3",
                        "czmObject": {
                            "xbsjType": "Tileset",
                            "name": "数字工厂-内部简模",
                            "maximumScreenSpaceError": 8,
                            "skipLevelOfDetail": false,
                            "url": "//lab.earthsdk.com/model/1b91bf10003311eaae02359b3e5d0653/tileset.json",
                            "xbsjStyle": "var style = {\n    color: \"vec4(0, 0.5, 1.0,1)\"\n}",
                            "xbsjCustomShader": {
                                "fsBody": fsBody,
                            }
                        }
                    },
                    {
                        "ref": "scaneline",
                        "czmObject": {
                            "xbsjType": "Scanline",
                            "xbsjGuid": "c827bdc1-c14b-4452-81de-7b2ce427b786",
                            "name": "扫描线",
                            "position": [2.0313392580015766, 0.6964409014088834, 0],
                            "radius": 3000,
                            "timeDuration": "3",
                            "currentTime": 0,
                            "color": [0.5, 0.8, 1.0, 1.0],
                        }
                    }
                ]
            };

            var tileset1 = earth.sceneTree.$refs.tileset1.czmObject;
            var tileset2 = earth.sceneTree.$refs.tileset2.czmObject;
            var tileset3 = earth.sceneTree.$refs.tileset3.czmObject;
            var scaneline = earth.sceneTree.$refs.scaneline.czmObject;
            window.tileset1 = tileset1;
            window.tileset2 = tileset2;
            window.tileset3 = tileset3;
            window.scaneline = scaneline;

            scaneline.playing = true;

            earth.camera.position = [2.03164809508113, 0.6966244295326638, 1040.2661065255693];
            earth.camera.rotation = [3.972507149093452, -0.5205829134298061, 6.28037637077842];

            createDynamicWall();
        }

        function createDynamicWall() {
            const positions = [
                [2.0315193182543485, 0.6963069713474035, 0.0],
                [2.031208054060137, 0.6963058641803516, 0.0],
                [2.0312082890850296, 0.6964532955295221, 0.0],
                [2.0315193182543485, 0.6963069713474035, 50.0],
                [2.031208054060137, 0.6963058641803516, 50.0],
                [2.0312082890850296, 0.6964532955295221, 50.0],
            ];
            const [localPositions, center] = XE.Obj.CustomPrimitive.Geometry.getLocalPositions(positions);

            const renderState = XE.Obj.CustomPrimitive.getRenderState(true, true);
            renderState.cull.enabled = false;

            const fragmentShaderSource =
                `
            varying vec3 v_positionEC;
            varying vec3 v_normalEC;
            varying vec2 v_st;
            varying vec4 v_color;
            uniform sampler2D u_image;
            uniform vec4 u_color;
            void main()
            {
                float powerRatio = fract(czm_frameNumber / 30.0) + 1.0;
                float alpha = pow(1.0 - v_st.t, powerRatio);
                gl_FragColor = vec4(u_color.rgb, alpha*u_color.a);
            }
            `;

            const config = {
                position: center,
                positions: [...localPositions],
                sts: [0.0, 0.0, 0.5, 0.0, 1.0, 0.0, 0.0, 1.0, 0.5, 1.0, 1.0, 1.0],
                indices: [0, 1, 4, 0, 4, 3, 1, 2, 5, 1, 5, 4],
                color: [0.5, 0.8, 1.0, 1.0],
                renderState,
                canvasWidth: 1,
                fragmentShaderSource,
            };

            const p = new XE.Obj.CustomPrimitive(earth);
            p.xbsjFromJSON(config);
        }

        // 1 XE.ready()会加载Cesium.js等其他资源，注意ready()返回一个Promise对象。
        XE.ready().then(startup);
    </script>
</body>

</html>